<template>
  <a-row class="!mx-0 mb-6" :gutter="20" id="a-row-2">
    <a-col :span="17" class="!pl-0" id="a-col-3">
      <a-flex :gap="20" id="a-flex-4">
        <a-typography-link href="#" class="flex flex-col w-2/3 relative" id="a-typography-link-5">
          <a-image src="https://picsum.photos/id/8/1000/800" :preview="false" class="aspect-[5/3]" id="a-image-6" />
          <a-typography-paragraph
            class="!mb-0 absolute bottom-0 inset-x-0 bg-black/50 text-white pt-2 pl-4 pb-5 text-lg"
            id="a-typography-paragraph-7"
          >
            《老年人膳食设计与烹饪技术规范》团体标准专家审定会在京召开
          </a-typography-paragraph>
          <a-flex :gap="8" class="absolute right-2 bottom-2" id="a-flex-8">
            <a-typography-link
              href="#"
              class="h-1.5 w-8 bg-[#e9e7e5]"
              v-for="index in nTopPages"
              :key="index"
              :class="{
                '!bg-[#a41d1f]': index === currentTopPage,
              }"
              :id="`a-typography-link-9-${index}`"
            />
          </a-flex>
        </a-typography-link>
        <a-flex vertical :gap="22" class="flex-1" id="a-flex-10">
          <a-typography-link href="#" id="a-typography-link-11">
            <a-image src="https://picsum.photos/id/12/1000/800" :preview="false" class="aspect-[5/3]" id="a-image-12" />
          </a-typography-link>
          <a-typography-link href="#" id="a-typography-link-13">
            <a-image src="https://picsum.photos/id/13/1000/800" :preview="false" class="aspect-[5/3]" id="a-image-14" />
          </a-typography-link>
        </a-flex>
      </a-flex>
    </a-col>
    <a-col :span="7" class="!pr-0" id="a-col-15">
      <a-flex align="center" justify="space-between" id="a-flex-16">
        <a-typography-link href="#" class="bg-[#e60112] !text-white px-4 text-lg" id="a-typography-link-17">公告通知</a-typography-link>
        <a-typography-link href="#" class="text-sm !text-[#000]" id="a-typography-link-18">
          更多
          <PlusOutlined id="plusoutlined-19" />
        </a-typography-link>
      </a-flex>
      <a-divider class="my-0 border-4 border-[#ebebeb] -translate-y-0.5 relative -z-10" id="a-divider-20" />
      <a-flex vertical v-for="(item, index) in list" :key="index" :gap="6" class="mt-3" :id="`a-flex-21-${index}`">
        <a-typography-link href="#" class="!text-[#000] text-lg" :id="`a-typography-link-22-${index}`"> {{ item }} </a-typography-link>
        <a-typography-link href="#" class="!text-[#d9251e]" :id="`a-typography-link-23-${index}`">[详情]</a-typography-link>
        <a-divider class="my-2" :id="`a-divider-24-${index}`" />
      </a-flex>
      <a-list :split="false" :data-source="list1" id="a-list-25">
        <template #renderItem="{ item, index }">
          <a-list-item
            class="!px-0 !py-0 gap-x-4 mb-2"
            :class="{
              '!mb-0': index === list1.length - 1,
            }"
            :id="`a-list-item-26-${index}`"
          >
            <a-typography-link href="#" class="!text-[#000] flex-1 line-clamp-1" :id="`a-typography-link-27-${index}`">{{
              item.title
            }}</a-typography-link>
            <a-typography-text class="text-[#000]" :id="`a-typography-text-28-${index}`">{{ item.date }}</a-typography-text>
          </a-list-item>
        </template>
      </a-list>
    </a-col>
  </a-row>
  <a-row class="!mx-0" :gutter="20" id="a-row-29">
    <a-col :span="17" class="!pl-0" id="a-col-30">
      <a-flex align="center" justify="space-between" id="a-flex-31">
        <a-typography-link href="#" class="bg-[#e60112] !text-white py-1 px-4 text-lg font-bold" id="a-typography-link-32"
          >协会动态</a-typography-link
        >
        <a-typography-link href="#" class="text-sm !text-[#000]" id="a-typography-link-33">
          更多
          <PlusOutlined id="plusoutlined-34" />
        </a-typography-link>
      </a-flex>
      <a-typography-link href="#" class="line-clamp-1" id="a-typography-link-35">
        <a-typography-title :level="1" class="my-3 !text-[rgb(252,3,3)]" id="a-typography-title-36">
          习近平：民营经济发展前景广阔大有可为 民营企业
        </a-typography-title>
      </a-typography-link>
      <a-list :split="false" :data-source="list2" class="my-4" :grid="{ gutter: 25, column: 2 }" id="a-list-37">
        <template #renderItem="{ item, index }">
          <a-list-item
            class="!px-0 !py-0 !mb-1 !flex"
            :class="{
              '!mb-0': index === list1.length - 1,
            }"
            :id="`a-list-item-38-${index}`"
          >
            <a-badge color="#333" :id="`a-badge-39-${index}`" />
            <a-typography-link href="#" class="!text-[#000] flex-1 line-clamp-1 pr-2" :id="`a-typography-link-40-${index}`">{{
              item.title
            }}</a-typography-link>
            <a-typography-text class="text-[#000]" :id="`a-typography-text-41-${index}`">{{ item.date }}</a-typography-text>
          </a-list-item>
        </template>
      </a-list>
    </a-col>
    <a-col :span="7" class="!pr-0" id="a-col-42">
      <a-flex align="center" justify="space-between" id="a-flex-43">
        <a-flex :gap="25" id="a-flex-44">
          <a-typography-link
            href="#"
            class="text-xl py-1 !text-[#000] relative"
            v-for="(item, index) in list3"
            :key="index"
            :id="`a-typography-link-45-${index}`"
          >
            {{ item }}
            <a-divider class="border-4 border-[#d9251e] absolute -bottom-0.5 my-0" v-if="index === 0" :id="`a-divider-46-${index}`" />
          </a-typography-link>
        </a-flex>
        <a-typography-link href="#" class="text-sm !text-[#000]" id="a-typography-link-47">
          更多
          <PlusOutlined id="plusoutlined-48" />
        </a-typography-link>
      </a-flex>
      <a-divider class="my-0 border-4 border-[#ebebeb] -translate-y-0.5 relative -z-10" id="a-divider-49" />
      <a-list :split="false" :data-source="list4" class="my-4" id="a-list-50">
        <template #renderItem="{ item, index }">
          <a-list-item
            class="!px-0 !py-0 !mb-1 !flex"
            :class="{
              '!mb-0': index === list1.length - 1,
            }"
            :id="`a-list-item-51-${index}`"
          >
            <a-typography-link href="#" class="!text-[#000] flex-1 line-clamp-1 pr-2" :id="`a-typography-link-52-${index}`">{{
              item.title
            }}</a-typography-link>
            <a-typography-text class="text-[#000]" :id="`a-typography-text-53-${index}`">{{ item.date }}</a-typography-text>
          </a-list-item>
        </template>
      </a-list>
    </a-col>
  </a-row>
  <a-typography-link href="#" class="flex flex-col" id="a-typography-link-54">
    <a-image src="https://picsum.photos/id/30/1000/800" :preview="false" class="aspect-[11/1]" id="a-image-55" />
  </a-typography-link>
</template>

<script setup>
  const nTopPages = 8;
  const currentTopPage = 1;
  const list = ['欢迎订阅《餐饮产业蓝皮书》（2024版）', '欢迎订阅《中国餐饮年鉴》（2023年版）', '欢迎订阅《餐饮产业蓝皮书》（2024版）'];
  const list1 = [
    {
      title: '关于开展2024年度中国餐饮企业经营情况调研的通知',
      date: '03-03',
    },
    {
      title: '关于2025年度中国新时代青年先锋拟推荐人选的公示',
      date: '02-25',
    },
    {
      title: '关于开展2024火锅产业好案例征集活动的通知',
      date: '02-21',
    },
    {
      title: '关于开展2024烧烤产业好案例征集活动的通知',
      date: '02-21',
    },
    {
      title: '关于开展2024年度中国餐饮企业经营情况调研的通知',
      date: '03-03',
    },
    {
      title: '关于2025年度中国新时代青年先锋拟推荐人选的公示',
      date: '02-25',
    },
    {
      title: '关于开展2024火锅产业好案例征集活动的通知',
      date: '02-21',
    },
    {
      title: '关于开展2024烧烤产业好案例征集活动的通知',
      date: '02-21',
    },
  ];
  const list2 = [
    {
      title: '《老年人膳食设计与烹饪技术规范》团体标准专家审定会在京召开',
      date: '02-28',
    },
    {
      title: '中国烹饪协会组织召开餐饮业民营企业家座谈会',
      date: '02-27',
    },
    {
      title: '我会召开食品安全研究组年度工作会议',
      date: '02-27',
    },
    {
      title: '中国气象局华风集团总经理率队到访中国烹饪协会',
      date: '02-21',
    },
    {
      title: '央视总台卫传公司党委书记一行到访中国烹饪协会',
      date: '02-14',
    },
    {
      title: '2025全国餐饮行业省级协会会长工作会议在京召开',
      date: '02-10',
    },
    {
      title: '中国烹饪协会在京举办中国烹饪大师新春团拜会',
      date: '02-09',
    },
    {
      title: '中国烹饪协会开展蛇年春节假期餐饮企业经营情况调研',
      date: '02-04',
    },
    {
      title: '2025年“跟着电影品美食”活动全国启动仪式在京举行',
      date: '01-22',
    },
    {
      title: '《中国企业家》杂志社社长钟云华一行到访中国烹饪协会',
      date: '01-22',
    },
    {
      title: '《老年人膳食设计与烹饪技术规范》团体标准专家审定会在京召开',
      date: '02-28',
    },
    {
      title: '中国烹饪协会组织召开餐饮业民营企业家座谈会',
      date: '02-27',
    },
    {
      title: '我会召开食品安全研究组年度工作会议',
      date: '02-27',
    },
    {
      title: '中国气象局华风集团总经理率队到访中国烹饪协会',
      date: '02-21',
    },
    {
      title: '用好国家惠企政策 助力餐饮业高质量发展——2024年餐饮业政策汇总',
      date: '01-02',
    },
    {
      title: '市场监管总局 教育部 民政部 国家卫生健康委 国管局关于强化集中用餐单位食堂承包经营食品安全管理工作的通知',
      date: '08-09',
    },
  ];
  const list3 = ['政策法规', '数据分析', '餐事辣评'];
  const list4 = [
    {
      title: '看两个《清单》→了解12种首违不罚和轻微免罚行为有哪些（附一图读懂）',
      date: '02-08',
    },
    {
      title: '新版《食品安全国家标准 食品添加剂使用标准》（GB2760-2024）今起实施',
      date: '02-08',
    },
    {
      title: '以完善食品安全责任体系推进加强校园食品安全工作——《关于进一步加强校园食品安全工作的通知》解读',
      date: '01-17',
    },
    {
      title: '一图读懂 | 《关于进一步加强校园食品安全工作的通知》',
      date: '01-17',
    },
    {
      title: '用好国家惠企政策 助力餐饮业高质量发展——2024年餐饮业政策汇总',
      date: '01-02',
    },
    {
      title: '市场监管总局 教育部 民政部 国家卫生健康委 国管局关于强化集中用餐单位食堂承包经营食品安全管理工作的通知',
      date: '08-09',
    },
    {
      title: '国务院关于促进服务消费高质量发展的意见',
      date: '08-06',
    },
    {
      title: '用好国家惠企政策 助力餐饮业高质量发展——2024年上半年餐饮业政策汇总',
      date: '07-08',
    },
    {
      title: '五部门发文培育餐饮消费新场景',
      date: '06-25',
    },
    {
      title: '市场监管总局等八部门：推行开办餐饮店“一体办”',
      date: '05-31',
    },
    {
      title: '用好国家惠企政策 助力餐饮业高质量发展——2024年餐饮业政策汇总',
      date: '01-02',
    },
  ];
</script>
<style></style>
